<template>
	<div class="player" v-show="playlist.length > 0">
		<transition 
				name="normal"
				@enter="enter"
				@after-enter="afterEnter"
				@leave="leave"
				@after-leave="afterLeave"
		>
			<div class="normal-player" v-show="fullScreen">
				<div class="background">
					<img width="100%" height="100%" :src="currentSong.image" />
				</div>
				<div class="top">
					<div class="back" @click="back">
						<i class="icon-back"></i>
					</div>
					<h1 class="title" v-html="currentSong.name"></h1>
					<h2 class="subtitle" v-html="currentSong.singer"></h2>
				</div>
				<div class="middle" 
						@touchstart.prevent="middleTouchStart"
						@touchmove.prevent="middleTouchMove"
						@touchend="middleTouchEnd"
				>
					<div class="middle-l" ref="middleL">
						<div class="cd-wrapper" ref="cdWrapper">
							<div class="cd" :class="cdCls">
								<img class="image" :src="currentSong.image" />
							</div>
						</div>
						<div class="playing-lyric-wrapper">
							<div class="playing-lyric">{{playingLyric}}</div>
						</div>
					</div>
					<scroll class="middle-r" ref="lyricList" :data="currentLyric && currentLyric.lines">
						<div class="lyric-wrapper">
							<div v-if="currentLyric">
								<p ref="lyricLine" 
										class="text"
										:class="{'current': currentLineNum === index}"
										v-for="(line, index) in currentLyric.lines"
								>
									{{line.txt}}
								</p>
							</div>
						</div>
					</scroll>
				</div>
				<div class="bottom">
					<div class="dot-wrapper">
						<span class="dot" :class="{'active':currentShow === 'cd'}"></span>
						<span class="dot" :class="{'active':currentShow === 'lyric'}"></span>
					</div>
					<div class="progress-wrapper">
						<span class="time time-l">{{format(currentTime)}}</span>
						<div class="progress-bar-wrapper">
							<progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar>
						</div>
						<span class="time time-r">{{format(currentSong.duration)}}</span>
					</div>
					<div class="operators">
						<div class="icon i-left" @click="changeMode">
							<!-- 播放模式icon图标 -->
							<i :class="iconMode"></i>
						</div>
						<div class="icon i-left" :class="disableCls">
							<i @click="prev" class="icon-prev"></i>
						</div>
						<div class="icon i-center">
							<i @click="togglePlaying" :class="playIcon"></i>
						</div>
						<div class="icon i-right" :class="disableCls">
							<i @click="next" class="icon-next"></i>
						</div>
						<div class="icon i-right">
							<i 
								class="icon" 
								@click="toggleFavorite(currentSong)" 
								:class="getFavoriteIcon(currentSong)"></i>
						</div>
					</div>
				</div>
			
			</div>
		</transition>
		<transition name="mini">
			<div class="mini-player" v-show="!fullScreen" @click="open">
				<div class="icon">
					<img  :class="cdCls" width="100%" height="100%" :src="currentSong.image" />
				</div>
				<div class="text">
					<h2 class="name" v-html="currentSong.name"></h2>
					<p class="desc" v-html="currentSong.singer"></p>
				</div>
				<div class="control">
					<progress-circle :radius="radius" :percent="percent">
						<i @click.stop="togglePlaying" :class="miniIcon" class="icon-mini"></i>
					</progress-circle>
				</div>
				<div class="control" @click.stop="showPlaylist">
					<i class="icon-playlist"></i>
				</div>
			</div>
		</transition>
		<playlist ref="playlist"></playlist>
		<audio 
			ref='audio' 
			:src="currentSong.url" 
			@play="ready" 
			@error="error"
			@timeupdate="updateTime"
			@ended="end"
		>
		</audio>
	</div>
</template>

<script>
	import { mapGetters, mapMutations, mapActions } from 'vuex'
	import animations from 'create-keyframe-animation'
	import { prefixStyle } from '@/common/js/dom'
	import ProgressBar from '@/base/progress-bar/progress-bar'
	import ProgressCircle from '@/base/progress-circle/progress-circle'
	// 引入 playMode 播放模式
	import { playMode } from '@/common/js/config'
	// 引入洗牌函数
	import { shuffle } from '@/common/js/util'
	import Lyric from 'lyric-parser'
	import Scroll from "@/base/scroll/scroll"
	import Playlist from '@/components/playlist/playlist'
	import { playerMixin } from '@/common/js/mixin'



	const transform = prefixStyle('transform')
	const transitionDuration = prefixStyle('transitionDuration')


	export default {
		mixins: [playerMixin],
		data() {
			return {
				songReady: false,
				// 表示当前时间
				currentTime: 0,
				radius: 32,
				currentLyric: null,
				// 当前播放歌曲代码高亮
				currentLineNum: 0,
				currentShow: 'cd',
				playingLyric: ''
			}
		},
		// 计算属性
		computed: {
			// 当播放歌曲的时候，图标进行旋转
			cdCls() {
				return this.playing ? 'play' : 'play pause' 
			},
			// 点击播放然后显示播放图标，暂停是切换到暂停图标
			playIcon() {
				return this.playing ? 'icon-pause' : 'icon-play'
			},
			// // icon 小图标 点击切换播放模式 在 mixin.js 里面定义了
			// iconMode() {
			// 	return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
			// },
			miniIcon() {
				return this.playing ? 'icon-pause-mini' : 'icon-play-mini'
			},
			disableCls() {
				return this.songReady ? '' : 'disable'
			},
			percent() {
				return this.currentTime / this.currentSong.duration
			},
			...mapGetters([
				'fullScreen',
				// 'playlist',
				// 'currentSong',
				'playing',
				'currentIndex',
				// 'mode',
				// 'sequenceList'
			])
		},
		created() {
			this.touch = {}

		},
		// 方法
		methods: {
			back() {
				this.setFullScreen(false)
			},
			open()  {
				this.setFullScreen(true)
			},
			enter(el, done) {
				const { x, y, scale} = this._getPostAndScale()

				let animation =  {
					0: {
						transform: `translate3d(${x}px, ${y}px,  0)  scale(${scale})`
					},
					60: {
						transform: `translate3d(0, 0, 0)  scale(1.1)`

					},
					100: {
						transform: `translate3d(0, 0, 0)  scale(1)`
					}
				}

				animations.registerAnimation({
					name: 'move',
					animation,
					presets: {
						duration: 400,
						easing: 'linear'
					}
				})

				animations.runAnimation(this.$refs.cdWrapper, 'move', done)
			},
			afterEnter() {
				animations.unregisterAnimation('move')
				this.$refs.cdWrapper.style.animation = ''
			},
			leave(el, done) {
				this.$refs.cdWrapper.style.transition = 'all 0.4s'
				const { x, y, scale} = this._getPostAndScale()
				this.$refs.cdWrapper.style[transform] = `translate3d(${x}px, ${y}px,  0)  scale(${scale})`
				this.$refs.cdWrapper.addEventListener('transitionend', done)
			},
			afterLeave() {
				this.$refs.cdWrapper.style.transition = ''
				this.$refs.cdWrapper.style[transform] = ''
			},
			_getPostAndScale() {
				const targetWidth = 40
				const paddingLeft = 40
				const paddingBottom = 30
				const paddingTop = 80
				const width = window.innerWidth * 0.8
				const scale = targetWidth / width
				const x = -(window.innerWidth / 2 - paddingLeft)
				const y = window.innerHeight - paddingTop - width / 2 - paddingBottom
				return {
					x,
					y,
					scale
				}
			},
			togglePlaying() {
				// 如果songReady还没有ready的时候就不进行,直接return 掉
				if (!this.songReady) {
					return 
				}
				this.setPlayingState(!this.playing)
				if (this.currentLyric) {
					this.currentLyric.togglePlay()
				}
			},
			// 歌曲播放完毕，切换到下一首
			end() {
				if (this.mode === playMode.loop) {
					this.loop()
				} else {
					this.next()
				}
			},
			loop(){
				this.$refs.audio.currentTime = 0
				this.$refs.audio.play()
				if (this.currentLyric) {
					this.currentLyric.seek(0)
				}
			},
			// 歌曲前进和后退
			next() {
				// 如果songReady还没有ready的时候就不进行,直接return 掉
				if(!this.songReady) {
					return
				}
				if (this.playlist.length === 1) {
					this.loop()
					return
				} else {
					let index = this.currentIndex + 1
					if (index === this.playlist.length) {
						index = 0
					}
					this.setCurrentIndex(index)
					// 如果是暂停状态切歌曲，那么切换过来时进行播放
					if (!this.playing) {
						this.togglePlaying()
					}
				}
				this.songReady = false
			},
			prev() {
				// 如果songReady还没有ready的时候就不进行,直接return 掉
				if(!this.songReady) {
					return
				}
				if (this.playlist.length === 1) {
					this.loop()
				} else {
					let index = this.currentIndex - 1
					// 如果是第一首歌曲,切换到最后一首歌曲
					if (index === -1) {
						index = this.playlist.length - 1
					}
					// 提交 去修改播放歌曲
					this.setCurrentIndex(index)
					// 如果是暂停状态切歌曲，那么切换过来时进行播放
					if (!this.playing) {
						this.togglePlaying()
					}
				}
				this.songReady =  false
			},
			ready(){
				this.songReady = true
				this.savePlayHistory(this.currentSong)
			},
			error() {
				this.songReady = true
			},
			updateTime(e) {
				this.currentTime = e.target.currentTime
			},
			// 取整
			format(interval) {
				interval = interval | 0
				const minute = interval / 60 | 0
				const second = this._pad(interval % 60)
				return `${minute}:${second}`
			},
			onProgressBarChange(percent) {
				const currentTime = this.currentSong.duration * percent


				this.$refs.audio.currentTime = currentTime

				if(!this.playing) {
					this.togglePlaying()
				}
				if (this.currentLyric) {
					this.currentLyric.seek(currentTime * 1000 )
				}
			},
			// // 获取点击切换图标
			// changeMode() {
			// 	const mode = (this.mode + 1) % 3
			// 	this.setPlayMode(mode)
			// 	// 切换播放模式图标之后切换播放歌曲列表
			// 	let list = null
			// 	// 当为随机播放时
			// 	if (mode === playMode.random) {
			// 		list = shuffle(this.sequenceList)
			// 	// 否则顺序播放
			// 	} else {
			// 		list = this.sequenceList
			// 	} 
			// 	//由于playlist 变成随机模式， currentsong 是根据 currentindex 和 playlist 
			// 	//改变的，需要保持currentindex 在随机播放列表的正确位置，以确保当前播放歌曲不变
			// 	this.resetCurrentIndex(list)
			// 	// 更改播放顺序之后把改后的数据传递过去进行设置
			// 	this.setPlayList(list)
			// },
			// resetCurrentIndex(list) {
			// 	let index = list.findIndex((item) => {
			// 		return item.id === this.currentSong.id
			// 	})
			// 	this.setCurrentIndex(index)
			// },
			getLyric() {
				
				this.currentSong.getLyric().then((lyric) => {
					if(this.currentSong.lyric !== lyric) {
						return 
					}
					this.currentLyric = new Lyric(lyric, this.handleLyric)
					if(this.playing) {
						this.currentLyric.play()
					}
					// console.log(this.currentLyric);
					// 获取不到歌词的话进行的处理
				}).catch(() => {
					this.currentLyric = null
					this.playingLyric = ''
					this.currentLineNum = 0
				})
			},
			handleLyric({lineNum, txt}) {
				this.currentLineNum =  lineNum
				// 如果行数大于五行
				if (lineNum > 5) {
					let lineEl = this.$refs.lyricLine[lineNum - 5]
					// 如果大于五行的话滚动到中间
					this.$refs.lyricList.scrollToElement(lineEl, 1000)
				} else {
					// 如果是五行之内的话滚动到顶部
					this.$refs.lyricList.scrollTo(0, 0, 1000)
				}
				// 显示当前播放的歌曲
				this.playingLyric = txt
			},
			// 显示歌曲列表组件 
			showPlaylist() {
				this.$refs.playlist.show()
			},
			middleTouchStart(e) {
				this.touch.initiated = true
				const touch = e.touches[0]
				this.touch.startX = touch.pageX
				this.touch.startY = touch.pageY
			},
			middleTouchMove(e) {
				if (!this.touch.initiated) {
					return 
				}
				const touch = e.touches[0]
				const deltaX = touch.pageX - this.touch.startX
				const deltaY = touch.pageY - this.touch.startY

				if (Math.abs(deltaY) > Math.abs(deltaX)) {
					return
				}
				const left = this.currentShow === 'cd' ? 0 : -window.innerWidth
				const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))

				this.touch.percent = Math.abs(offsetWidth / window.innerWidth)

				this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`

				this.$refs.lyricList.$el.style[transitionDuration] = 0
				this.$refs.middleL.style.opacity = 1 - this.touch.percent
				this.$refs.middleL.style[transitionDuration] = 0
			},
			middleTouchEnd()  {
				let offsetWidth
				let opacity
				if (this.currentShow === 'cd') {
					if (this.touch.percent > 0.1) {
						offsetWidth = -window.innerWidth
						opacity = 0
						this.currentShow = 'lyric'
					}  else {
						offsetWidth = 0
						opacity = 1
					}

				} else {
						if (this.touch.percent < 0.9) {
							offsetWidth = 0
							this.currentShow = 'cd'
							opacity = 1
						} else {
							offsetWidth = -window.innerWidth
							opacity = 0
						}
					}
					const time = 300
					this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`
					this.$refs.lyricList.$el.style[transitionDuration] = `${time}ms`
					this.$refs.middleL.style.opacity = opacity
					this.$refs.middleL.style[transitionDuration] = `${time}ms`
			},
 			// 对一位数进行补零
			_pad(num, n=2) {
				// 当字符串长度等于1时，前面会进行补零
				let len = num.toString().length
				while(len < n) {
					num = '0' + num
					len++
				}
				return num
			},
			...mapMutations({
				setFullScreen: 'SET_FULL_SCREEN'
				// setPlayingState: 'SET_PLAYING_STATE',
				// setCurrentIndex: 'SET_CURRENT_INDEX',
				// setPlayMode: 'SET_PLAY_MODE',
				// setPlayList: 'SET_PLAY_LIST'
			}),
			...mapActions([
				'savePlayHistory'
			])
		},
		watch: {
			currentSong(newSong, oldSong) {
				// 如果没有新歌的话直接返回
				if (!newSong.id) {
					return
				}
				if (newSong === oldSong) {
					return 
				} 
				if (this.currentLyric) {
					this.currentLyric.stop()
					this.currentTime = 0
					this.playingLyric = ''
					this.currentLineNum = 0
				}
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					// 播放音乐
					this.$refs.audio.play()
					// 歌词
					this.getLyric()
				}, 1000)
			},
			playing(newPlaying) {
				const audio = this.$refs.audio
				// 设计延迟
				this.$nextTick(() => {
					newPlaying ? audio.play() : audio.pause()
				})
			}
		},
		components: {
			ProgressBar,
			ProgressCircle,
			Scroll,
			Playlist
		}
	}
</script>

<style scoped lang="stylus">
	@import "~common/stylus/variable"
	@import "~common/stylus/mixin"
	

	.player
		.normal-player
			position: fixed
			left: 0
			right: 0
			top: 0
			bottom: 0
			z-index: 150
			background: $color-background
			.background
				position: absolute
				left: 0
				top: 0
				width: 100%
				height: 100%
				z-index: -1
				opacity: 0.6
				filter: blur(20px)
			.top
				position: relative
				margin-bottom: 25px
				.back
					position absolute
					top: 0
					left: 6px
					z-index: 50
					.icon-back
						display: block
						padding: 9px
						font-size: $font-size-large-x
						color: $color-theme
						transform: rotate(-90deg)
				.title
					width: 70%
					margin: 0 auto
					line-height: 40px
					text-align: center
					no-wrap()
					font-size: $font-size-large
					color: $color-text
				.subtitle
					line-height: 20px
					text-align: center
					font-size: $font-size-medium
					color: $color-text
			.middle
				position: fixed
				width: 100%
				top: 80px
				bottom: 170px
				white-space: nowrap
				font-size: 0
				.middle-l
					display: inline-block
					vertical-align: top
					position: relative
					width: 100%
					height: 0
					padding-top: 80%
					.cd-wrapper
						position: absolute
						left: 10%
						top: 0
						width: 80%
						height: 100%
						.cd
							width: 100%
							height: 100%
							box-sizing: border-box
							border: 10px solid rgba(255, 255, 255, 0.1)
							border-radius: 50%
							&.play
								animation: rotate 20s linear infinite
							&.pause
								animation-play-state: paused
							.image
								position: absolute
								left: 0
								top: 0
								width: 100%
								height: 100%
								border-radius: 50%
					.playing-lyric-wrapper
						width: 80%
						margin: 30px auto 0 auto
						overflow: hidden
						text-align: center
						.playing-lyric
							height: 20px
							line-height: 20px
							font-size: $font-size-medium
							color: $color-text-l
				.middle-r
					display: inline-block
					vertical-align: top
					width: 100%
					height: 100%
					overflow: hidden
					.lyric-wrapper
						width: 80%
						margin: 0 auto
						overflow: hidden
						text-align: center
						.text
							line-height: 32px
							color: $color-text-l
							font-size: $font-size-medium
							&.current
								color: $color-text
			.bottom
				position: absolute
				bottom: 50px
				width: 100%
				.dot-wrapper
					text-align: center
					font-size: 0
					.dot
						display: inline-block
						vertical-align: middle
						margin: 0 4px
						width: 8px
						height: 8px
						border-radius: 50%
						background: $color-text-l
						&.active
							width: 20px
							border-radius: 5px
							background: $color-text-ll
				.progress-wrapper
					display: flex
					align-items: center
					width: 80%
					margin: 0px auto
					padding: 10px 0
					.time
						color: $color-text
						font-size: $font-size-small
						flex: 0 0 30px
						line-height: 30px
						width: 30px
						&.time-l
							text-align: left
						&.time-r
							text-align: right
					.progress-bar-wrapper
						flex: 1
				.operators
					display: flex
					align-items: center
					.icon
						flex: 1
						color: $color-theme
						&.disable
							color: $color-theme-d
						i
							font-size: 30px
					.i-left
						text-align: right
					.i-center
						padding: 0 20px
						text-align: center
						i
							font-size: 40px
					.i-right
						text-align: left
					.icon-favorite
						color: $color-sub-theme
			&.normal-enter-active, &.normal-leave-active
				transition: all 0.4s
				.top, .bottom
					transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
			&.normal-enter, &.normal-leave-to
				opacity: 0
				.top
					transform: translate3d(0, -100px, 0)
				.bottom
					transform: translate3d(0, 100px, 0)
		.mini-player
			display: flex
			align-items: center
			position: fixed
			left: 0
			bottom: 0
			z-index: 180
			width: 100%
			height: 60px
			background: $color-highlight-background
			&.mini-enter-active, &.mini-leave-active
				transition: all 0.4s
			&.mini-enter, &.mini-leave-to
				opacity: 0
			.icon
				flex: 0 0 40px
				width: 40px
				padding: 0 10px 0 20px
				img
					border-radius: 50%
					&.play
						animation: rotate 10s linear infinite
					&.pause
						animation-play-state: paused
			.text
				display: flex
				flex-direction: column
				justify-content: center
				flex: 1
				line-height: 20px
				overflow: hidden
				.name
					margin-bottom: 2px
					no-wrap()
					font-size: $font-size-medium
					color: $color-text
				.desc
					no-wrap()
					font-size: $font-size-small
					color: $color-text-d
			.control
				flex: 0 0 30px
				width: 30px
				padding: 0 10px
				.icon-play-mini, .icon-pause-mini, .icon-playlist
					font-size: 30px
					color: $color-theme-d
				.icon-mini
					font-size: 32px
					position: absolute
					left: 0
					top: 0
					
	@keyframes rotate
		0%
			transform: rotate(0)
		100%
			transform: rotate(360deg)
</style>